<script >
export default {
  data() {
    return {
      advice: "There's no advice yet",
      isLoading: false
    };
  },
  methods: {
    async getAdvice() {
      this.isLoading = true;
      const response = await fetch("https://api.adviceslip.com/advice");
      const data = await response.json();

      this.advice = data.slip.advice;
      this.isLoading = false;
    }
  },
  computed: {
      answer() {
       return  this.isLoading ? "Loading" : this.advice 
      }
  },
  mounted(){
    this.getAdvice();
  }
};

</script>

<template>
  <main>
  <h1>Advice</h1>
<p>{{ answer }}</p>
<button :disabled="isLoading" @click="getAdvice">Get Advice</button>
  </main>



</template>

<style scoped>

</style>
